Bootstrap Snippet responsive navbar using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<nav class="nav">
  <a class="nav__logo" href="#"><img src="https://via.placeholder.com/120x34?text=''"></a>
  
  <button id="burger" class="nav__burger-button">
    <div class="nav__burger">
      <div class="nav__burger-inner"></div>
    </div>
  </button>
  
  <ul class="nav__link-wrapper">
    <li class="nav__link"><a href="#">About</a></li>
    <li class="nav__link"><a href="#">Team</a></li>
    <li class="nav__link"><a href="#">Work</a></li>
    <li class="nav__link"><a href="#">Contact</a></li>
  </ul>
</nav>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
a {
  text-decoration: none;
  color: inherit;
}
.nav {
  display: flex;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.nav__logo {
  height: 34px;
  width: auto;
}
.nav__link-wrapper {
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-left: 0;
}
.nav__link {
  list-style: none;
  padding: 10px;
}
.nav__burger-button {
  padding: 10px;
  cursor: pointer;
  background-color: transparent;
  border: none;
  outline: none;
}
.nav__burger {
  position: relative;
  width: 40px;
  height: 24px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
var $button = $('#burger');
var $navLinkWrapper = $('.nav__link-wrapper');
$button.on('click', function(e) {
  e.preventDefault();
  $button.find('.nav__burger-inner').toggleClass('active');
  $navLinkWrapper.toggleClass('expanded');
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"responsive navbar"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"responsive navbar" Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY

Related: See More

Questions / Comments:

"responsive navbar"
Bootstrap 4.1.1 Snippet by ALIMUL AL RAZY